<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 按顺序导入相关的js和css -->
		<link rel="stylesheet" href="../lib/themes/default/easyui.css" type="text/css"/>
		<link rel="stylesheet" href="../lib/themes/icon.css" />
		
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../lib/jquery/jquery.easyui.min.js"></script>
		
		<!-- 导入分页的中文版语言 -->
		<script type="text/javascript" src="../lib/easyui-lang-zh_CN.js"></script>
		
	</head>
	<body>
		<h1>1-分页显示效果</h1>
		
		<h2>1.1- 使用 div 显示分页</h2>
		<div id="pp" 
			class="easyui-pagination" 
			data-options="total:2000,pageSize:10" 
			style="background:#efefef;border:1px solid #ccc;"></div> 
		
		<h2>1.2- 使用 JS 显示分页效果</h2>
		<div id="paginationID"class="easyui-pagination" 
			style="background:#efefef;border:1px solid #ccc;width: 500px;height:30px;;"></div>
		
		<script>
			$("#paginationID").pagination({
				"total":100,//总页数
				"pageSize":10,//每一页显示记录数
				"pageNumber":1,//默认的当前页数
				"showPageList":false,//定义是否显示页面导航列表。
				"layout":["sep","list","first","prev","manual","next","last","links"]
			});
			
			//响应时间
			$("#paginationID").pagination({
				onSelectPage:function(pageNum,pageSize){
					alert("当前第"+pageNum+"页\n每页显示"+pageSize+"条记录");
				}
			});
		</script>
		

	</body>
</html>
